

import React, { Component } from 'react'
import { countDesc ,changeCount,changeCity, changeMsg, changeWord, changeFlag, changeDataTest, changeDataNum, changeDataTestAsync, getMovieList, } from '../actions';
import store from '../store'
import {ajax } from './../../utils/ajax';
export default class Counter extends Component {


  changeTest=()=>{
    //组件里面请求ajax
    ajax.get("http://localhost:3000/api/test")
    .then(res=>{
      console.log(res);
      store.dispatch(changeDataTest(res.data.msg))
    })
  }
  render() {
      console.log(this.props);
      const {value}=this.props
      const {count,city,msg,word ,data,test}=store.getState()
    return (
      <div>
         {
             data.flag && <div>
                  <h2>
              redux 实现简单的计数器
          </h2>
          <h2>count---{value.count}--{count} </h2>
          <h2> city---{value.city}--{city}</h2>
          <h2> msg----{msg}</h2>
          <h2> word----{word}</h2>
          <h2> test----{data.test}</h2>
          <h2> num----{data.num}</h2>
             </div>
         }
         
          
         
          
          <hr/>
          <button onClick={()=>store.dispatch({type:"countAdd"})}>点击修改count</button>
          <button onClick={()=>store.dispatch(countDesc)}>点击修改count</button>
          <button onClick={()=>store.dispatch(changeCount(120))}>changeCount</button>
          <button onClick={()=>store.dispatch(changeCity('想去迪拜坐飞机'))}>想去迪拜坐飞机</button>
        
          <button onClick={()=>store.dispatch(changeMsg('少玩手机多背面试题'))}>你们2点了吗</button>
          <p>
              <input type="text" value={word} ref={el=>this.word=el} onChange={()=>store.dispatch(changeWord(this.word.value))}/>
          </p>
          <p>
              <button onClick={()=>store.dispatch(changeFlag(!data.flag))}>点击切换flag</button>
              <button onClick={()=>store.dispatch(changeDataTest("为了自己的offer努力"))}>点击修改api</button>
              <button onClick={()=>store.dispatch(changeDataNum(200))}>num add 100</button>
              <button onClick={this.changeTest}>async</button>
              <button onClick={()=>store.dispatch(changeDataTestAsync())}>asynsdasc</button>
              <button onClick={()=>store.dispatch(getMovieList())}>获取电影数据</button>
              
          </p>
      
          {
            data.mv.map((l,i)=>(
        
                <h1 key={i}>{l.title}</h1>
        
              
      
            ))
  }
      
         
          
      </div>
    )
  }
}
